import React, { useState } from "react";
import { Breadcrumb, Layout, Menu, theme } from "antd";
import { Outlet, useNavigate,useLocation } from "react-router-dom";
const { Header, Content, Footer, Sider } = Layout;
import MyMenu from "../components/MyMenu.jsx";
const App = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const history = useLocation();
  // console.log(history.pathname);

  return (
    <Layout style={{ minHeight: "100vh" }}>
      {/* 左侧侧边栏 */}
      <MyMenu></MyMenu>
      {/* 右侧内容 */}
      <Layout>
        {/* 头部 */}
        <Header style={{ padding: 0, background: colorBgContainer }}>
          {/* 面包屑 */}
          <Breadcrumb
            style={{ margin: "0 16px", lineHeight: "64px" }}
            items={[{ title: history.pathname }]}
          ></Breadcrumb>
        </Header>
        {/* 主内容 */}
        <Content
          style={{
            margin: "16px 16px 0",
            height: "100%",
          }}
        >
          <Outlet></Outlet>
        </Content>
        {/* 底部 */}
        <Footer
          style={{
            textAlign: "center",
            padding: "0",
            lineHeight: "48px",
          }}
        >
          Ant Design ©2023 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};
export default App;
